<template>

    <div class="main">
        <ul class="questions">
            <li class="title">{{title[type]}}</li>
            <empty v-show="empty"></empty>
                <li class="a-question" v-for="(question,index) in questionList">
                    <div style="display:table;">
                        <router-link :to="'/professor/'+question.professor_id">
                            <div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;float:left;">
                                <img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="question.user_avatar" />
                                <img class="verified" style="position:absolute;width:0.6166666666666667rem;height:0.6166666666666667rem;right:0;bottom:0;" src="/fengshui/static/pic/icon/verified.png" />
                            </div>
                        </router-link>
                        <router-link :to="'/question/'+question.question_id">
                            <div style="margin-left:2.6rem;">
                                <p class="question-content">{{question.title}}</p>
                            </div>
                        </router-link>
                    </div>
                    
                    <div  class="question-answer">
                        <div class="avatar" style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;">
                            <img style="position:relative;width:1.85rem;height:1.85rem;border-radius:50%;display:inline-block;" class="avatarImg" :src="question.professor_avatar" />
                        </div>
                        <input type="hidden" value="nothing" />
                        <p v-if="question.answer_id===null" class="player" style="float: left; line-height: 1.85rem;font-size: 0.8rem">大师还未回答，请耐心等待~</p>
                        <player v-if="question.answer_id!==null" :id="question.answer_id" class="player" v-on:listenCountIncrease="addListenCount(index)"></player>
                        <span v-if="question.answer_id!==null" class="duration">{{ question.duration }}″</span>
                    </div>
                    <div class="question-footer">
      <like-btn class="count" :likecount="question.like_count" :questionid="question.question_id" :likeid="question.like_id" ></like-btn>
                        <!--<span class="count"><i class="like-icon like-icon-gray"></i><span> {{question.like_count}}</span></span>-->
                        <span class="count"><span>听过&nbsp;</span><span>{{question.listen_count}}</span></span>
                        <span class="time">{{timeAgo(question.time)}}</span>
                    </div>
                </li>
                  <infinite-loading :on-infinite="onInfinite" spinner="waveDots" :distance="10" ref="infiniteLoading">
                   <i slot="spinner" class="loading-customer-spiral"></i>
                   <p slot="no-more">到底了 :)</p>
             </infinite-loading>

        </ul>

<customer-footer></customer-footer>
    </div>
</template>
<script>
    import InfiniteLoading from 'vue-infinite-loading';
    import LikeBtn from "../components/QuestionLikeBtn"
    import {
        showLoading
    } from '../js/dialogUtil.js'

    import {
        timeAgo
    } from '../js/util.js'
    export default {
        components: {
            LikeBtn,
            InfiniteLoading
        },
        props: [
            "type"
        ],
        data() {
            return {
                questionList: [],
                page_index: 0,
                page_count: 100,
                count: 0,
                empty: false,
                busy: false,
                title: {
                    ask: "我的提问",
                    listen: "我的偷听",
                    answer: "我的回答"
                }
            }
        },
        methods: {
            addListenCount: function(index) {
                this.questionList[index].listen_count = Number(this.questionList[index].listen_count) + 1;
            },
            timeAgo: function(time) {
                return timeAgo(time);
                // return time;
            },
            onInfinite() {
                let vm = this;
                if (vm.page_index >= vm.page_count) {
                    return;
                }
                vm.busy = true;
                let params = {
                    p: vm.page_index + 1,
                    type: vm.type
                }
                vm.$http.jsonp(vm.url.acid + "&do=mylist", {
                    params: params
                }).then(response => {
                    let json = response.body;
                    if (json.status == 'success') {
                        vm.page_count = json.page_count;
                        vm.questionList = vm.questionList.concat(json.data)
                            //没有相关数据
                        if (vm.questionList.length == 0) {
                            vm.empty = true;
                        }
                        vm.count = json.count;
                        vm.page_index = json.page_index;
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:loaded');
                        if (vm.page_index >= vm.page_count) {
                            vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        }
                    } else {
                        vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                        showLoading(vm, json.msg);
                    }
                    //当前页等于最后一页停止加载数据
                }, response => {
                    vm.$refs.infiniteLoading.$emit('$InfiniteLoading:complete');
                    showLoading(vm, "连接服务器失败");
                    vm.busy = true;
                });
            }
        }
    }
</script>

<style scoped>
    li {
        list-style-type: none;
    }
    
    .tutor-detail {
        padding: .9rem;
        padding-bottom: .625rem;
        background: #fff;
        position: relative;
    }
    
    .tutor-detail .follow {
        right: 1rem;
        color: #f85f48;
    }
    
    .tutor-detail .follow,
    .tutor-detail .followed {
        position: absolute;
        top: 0;
        font-size: .65rem;
        text-align: right;
        padding-top: 1.4rem;
        z-index: 1;
    }
    
    .tutor-detail .follow .btn-follow,
    .tutor-detail .followed .btn-follow {
        width: .7rem;
        height: .7rem;
        display: block;
        margin: 0 auto .25rem;
    }
    
    .tutor-detail .tutor {
        padding: .25rem 4.5rem 0 3.25rem;
        position: relative;
        height: 2.65rem;
        line-height: 1.5;
    }
    
    .tutor-detail .tutor .avatar {
        position: absolute;
        top: 0;
        left: 0;
    }
    
    .tutor-detail .title {
        margin-top: .8rem;
    }
    
    .tutor-detail .tutor .nickname {
        font-size: .85rem;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    .tutor-detail .tutor .follow-count {
        font-size: .7rem;
        color: #999;
    }
    
    .tutor-detail .tutor .follow-count .count {
        color: #333;
    }
    
    .tutor-detail .introduction,
    .tutor-detail .title {
        color: #333;
        font-size: .7rem;
        line-height: 1.5;
    }
    
    .tutor-detail .tags {
        margin-top: .3rem;
    }
    
    .tutor-detail .tags .tag {
        display: inline-block;
        line-height: 1rem;
        font-size: .6rem;
        color: #999;
        padding: 0 .35rem;
        margin-right: .3rem;
        border-radius: .1rem;
        border: 1px solid #e5e5e5;
    }
    
    .tutor-detail .report {
        margin-top: -1rem!important;
    }
    
    .report {
        float: right;
        margin-top: -.5rem;
    }
    
    .questions .a-question {
        margin-bottom: .6rem;
        padding: .9rem .6rem .5rem;
        background: #fff;
        overflow: hidden;
    }
    
    .question-form {
        padding: .6rem .9rem .9rem;
        background: #fff;
    }
    
    .question-form .tips {
        box-sizing: border-box;
        font-size: .65rem;
        margin-bottom: .725rem;
        color: #999;
        position: relative;
        height: 1.2rem;
        line-height: 1.2rem;
        padding-top: .12rem;
    }
    
    .question-form .tips .ques-note {
        float: right;
        display: inline-block;
        padding-top: .05rem;
    }
    
    .question-form .text-wrap {
        padding: .65rem .65rem .57rem;
        background: #f4f4f4;
        border: 1px solid #d6d6d6;
        border-radius: .2rem;
        position: relative;
    }
    
    .question-form textarea {
        display: block;
        width: 100%;
        height: 3.5rem;
        background: #f4f4f4;
        border: none;
        font-size: .75rem;
        line-height: .9rem;
        outline: none;
        box-shadow: none;
        -webkit-appearance: none;
        resize: none;
    }
    
    .question-form .counter {
        position: absolute;
        bottom: .625rem;
        right: .625rem;
        font-size: .75rem;
        color: #999;
    }
    
    .question-form .btn-panel {
        padding-top: .475rem;
        text-align: center;
    }
    
    .question-form .btn-panel button {
        padding: .4rem .45rem;
        border-radius: .25rem;
        background-color: #f85f48;
        color: #fff;
        font-size: .85rem;
    }
    
    .questions .a-question .question-content {
        font-size: .8rem;
        line-height: 1.1rem;
        color: #3f3f3f;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .questions .a-question .question-answer .avatar {
        float: left;
    }
    
    .questions .a-question .question-answer {
        overflow: hidden;
        margin-top: .9rem;
    }
    
    .questions .a-question .question-footer {
        color: #ababab;
        font-size: .65rem;
        margin-left: .3rem;
        margin-top: .95rem;
    }
    
    .questions .a-question .question-footer .count {
        float: right;
        margin-left: .5rem;
        line-height: 1.1rem;
    }
    
    button {
        display: inline-block;
        outline: none;
        border: none;
        text-align: center;
        text-decoration: none;
    }
    
    .like-icon-gray {
        color: #999;
        background-image: url('/fengshui/static/pic/icon/like.png');
    }
    
    .like-icon {
        width: .8rem;
        height: .8rem;
        vertical-align: -5%;
    }
    
    .questions .a-question .question-footer .pic-icon,
    .questions .a-question .question-footer .time {
        line-height: 1.1rem;
        vertical-align: middle;
    }
    
    .player {
        margin-left: 1.05rem;
    }
    
    .like-icon {
        display: inline-block;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: 50%;
    }
    
    .header-bar {
        padding-left: .6rem;
        background: #f4f4f4;
        line-height: 2rem;
        color: #999;
        font-size: .65rem;
    }
    
    .questions {
        margin-bottom: 4rem;
    }
    
    .title {
        height: 2.25rem;
        line-height: 2.25rem;
        color: #999;
        font-size: .7rem;
        text-align: center;
        padding: 0;
        background: white;
        margin-bottom: .25rem;
    }
</style>